<template>
  <div class="container">
    <div class="bgwhite">
      <mu-list>
        <mu-list-item title="">
          <span slot="left" class="ltxt">申请时间</span>
          <span slot="left" class="ltxt1">{{qData.createTime}}</span>
          <span slot="right" class="feeText">{{qData.consultStatus | filterMedicalStatus}}</span>
        </mu-list-item>
        <mu-divider/>

        <mu-list-item title="医生">
          <span slot="right">{{qData.doctName}} {{qData.deptName}}</span>
        </mu-list-item>
        <mu-divider/>

        <mu-list-item title="复诊配药（诊疗费）">
          <span slot="right" class="feeText1">￥{{qData.cost}}</span>
        </mu-list-item>
        <mu-divider/>
      </mu-list>
    </div>
    <div class="mt10"></div>
    <div class="bgwhite">
      <mu-list>
        <mu-list-item title="问诊人">
          <span slot="right">{{qData.personName}} {{qData.gender | getSex}} {{qData.age}}岁</span>
        </mu-list-item>
        <mu-divider/>

        <mu-list-item title="既往就诊">
          <div slot="right">
            <p class="text-right">{{qData.lastmodifyTime.slice(0, 11)}}</p>
            <span>{{qData.orgName}} / {{qData.deptName}}</span>
          </div>
        </mu-list-item>
        <mu-divider/>

        <mu-list-item title="确诊诊断">
          <span slot="right" class="diagnosis">{{qData.diagnosis}}</span>
        </mu-list-item>
        <mu-divider/>

        <mu-list-item title="所需药品">
          <ul slot="right" class="drugs" v-if="qData.drugs">
            <li v-for="(value, index) in qData.drugs.split(',')">{{ value }}</li>
          </ul>
        </mu-list-item>
        <mu-divider/>
      </mu-list>
    </div>
    <div class="mt10"></div>
    <left-border-title :title="'病情描述'"></left-border-title>
    <div class="scon bgwhite">
      {{qData.question || ''}}
    </div>
    <div class="mt10"></div>
    <left-border-title :title="'病情照片'"></left-border-title>
    <ul class="fileHandler flex wrap bgwhite">
      <li v-for="(item,index) in images" :key="index"><img :src="item.fileUrl" alt=""></li>
    </ul>

    <div class="bottomHandler flex">
      <div>
        <mu-raised-button label="取消问诊" fullWidth @click="confirmCancel()"/>
      </div>
      <div>
        <mu-raised-button label="去支付" primary fullWidth @click="goPay()"/>
      </div>
    </div>
    <mu-dialog :open="dialog" title="温馨提示" @close="close">
      确认取消问诊吗？
      <mu-flat-button slot="actions" @click="close" primary label="取消"/>
      <mu-flat-button slot="actions" primary @click="cancelAsk()" label="确定"/>
    </mu-dialog>
  </div>
</template>

<script>
  import leftBorderTitle from '../../components/leftBorderTitle.vue'
  import {commonAjaxJson, RESTFUL_API} from '../../api/api'

  export default {
    data() {
      return {
        qData: {},
        images: [],
        doctor: {},
        param: {
          consultId: ""
        },
        dialog: false
      }
    },
    components: {
      leftBorderTitle
    },
    methods: {
      goPay () {
        this.$router.push({
          path: '/medicalAgain/confirmPay',
          query: {
            cid: this.$route.query.cid
          }
        })
      },
      close () {
        this.dialog = false
      },
      getOrderDetail() {
        if (!this.$route.query.cid) {
          this.$store.commit('UPDATE_TOAST', {
            message: "页面错误!"
          });
          return;
        }
        this.param.consultId = this.$route.query.cid;
        commonAjaxJson(RESTFUL_API.queryDetail, this.param, true).then(res => {
          if (res && res.data.data) {
            res.data.data.cost = (res.data.data.cost || "") + '';
            this.qData = res.data.data.ask;
            this.images = res.data.data.listAttr;
            this.doctor = res.data.data.doctor;
          } else {
            this.$store.commit('UPDATE_TOAST', {
              message: res.data.message
            });
          }
        });
      },
      confirmCancel () {
        this.dialog = true
      },
      cancelAsk () {
        commonAjaxJson(RESTFUL_API.cancelDispenseOrder, this.param, true).then(res => {
          if (res.data.code == 200) {
            this.$store.commit('UPDATE_TOAST', {
              message: '已为您取消问诊'
            });
            this.$router.push('/medicalHistory/index')
          } else {
            this.$store.commit('UPDATE_TOAST', {
              message: res.data.message
            });
          }
        })
      }
    },
    mounted() {
      this.getOrderDetail();
    }
  }
</script>

<style lang="less" scoped>
  @import "../../common/css/flex.css";
  @import '../../common/css/component';

  .bottomHandler {
    position: absolute;
    bottom: 0;
    width: 100%;
    > div {
      width: 50%;
    }
    @{deep} .mu-raised-button {
      height: 44px;
    }
  }

  .container {
    padding-bottom: 30px;
    @{deep} .mu-item-left img {
      width: 30px;
      height: 30px;
    }
    @{deep} .mu-item.show-left {
      padding-left: 60px;
    }
    @{deep} .mu-item-title {
      color: #666;
      font-size: 14px;
    }
    @{deep} .mu-item-text {
      color: #ccc;
    }
    @{deep} .mu-item-right {
      color: #333;
      font-size: 14px;
      justify-content: flex-end;
    }
    @{deep} .mu-item {
      min-height: 44px;
    }
    .feeText {
      font-weight: normal;
      color: #0fc47d;
      font-size: 14px;
    }
    .ltxt {
      white-space: nowrap;
      color: #666;
      padding-right: 10px;
      font-size: 14px;
    }
    .ltxt1 {
      white-space: nowrap;
      color: #999;
      font-size: 14px;
    }
    .lefttime {
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      color: #ff6600;
      background: #fffdce;
      border-bottom: 1px solid #e8e8e8;
    }
    .fcon {
      padding: 0px 15px 0px 15px;
      background: #fff;
      border-bottom: 1px solid #e8e8e8;
      > div:first-child {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e8e8e8;
        font-size: 14px;
        color: #666;
      }
    }
    .scon {
      border-top: 1px solid #e8e8e8;
      width: 100%;
      padding: 15px;
      color: #666;
      font-size: 14px;
    }
    .tcon {
      border-top: 1px solid #e8e8e8;
      width: 100%;
      padding: 15px;
      color: #666;
      font-size: 14px;
    }
    .fileHandler {
      border-top: 1px solid #e8e8e8;
      padding: 0px 15px;
      padding-bottom: 20px;
      li {
        position: relative;
        width: 25%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        img {
          width: 80%;
          height: 80%;
          border-radius: 4px;
        }
      }
    }
    .lcon {
      width: 100%;
      padding-top: 10px;
      text-align: center;
      @{deep}.mu-raised-button {
        width: 80%;
        height: 44px;
        margin-top: 20px;
      }
      @{deep}.mu-raised-button-secondary {
        color: #f24242;
        border: 1px solid #f24242;
        background: #fff1f1;
      }
    }
  }

  .feeText1 {
    color: #FF6600;
    font-size: 16px;
  }

  .diagnosis {
    max-width: 60%;
    text-align: right;
  }

  .drugs {
    li {
      background-color: #E7F9F2;
      color: @color-primary;
      border-radius: 3px;
      padding: 2px;
    }
  }
</style>
